<?php
	echo $this->Html->script('jquery-ui-1.8.9.custom.min.js');
?>
<script>
$(function() {
    $('#mnth-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        onClose: function(dateText, inst) { 
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(year, month, 1));
        }
    });
    // -- end date picker mod ---
    
    $('#reporter').click(function generatehours()
    {
        if($('#mnth-picker').val() === "")
        {
            alert('Please select something ');
        }
        else
        {
            var mnth = $('#mnth-picker').val();
            //alert(mnth);
            var range = mnth.split(" ");
            //alert(uh);
            $('#results').load('<?php echo $this->Html->url('/jobs/hreport/')?>' + range[0] + '/' + range[1]); 
        }
        
    });
    
    
});

</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

<section>
<fieldset>
<legend>Criteria</legend>
<div class="hreport">

<?php
	
?>
<p>Month <input id="mnth-picker" type="text"/>
<?php
	echo $form->button('<span class="accept"></span>Get Report', array('id' => 'reporter', 'class' => 'button button-gray accept'));
    $today = date("F Y");
    //echo $today;
?></p>
</div>
</fieldset>
<fieldset>
<legend>Results</legend>
<div id="results"></div>
</fieldset>
</section>

